<template>
	<view>
		<!-- 头部 --><!-- @longpress  @click="del_img(index)" -->
		<!-- <view style="min-height: 180upx;background-color: #fff;">
			<view style="display: inline-block;width: 150upx;height: 150upx;border-radius: 10upx;border: 2upx solid #ccc;margin-left: 20upx;overflow: hidden;margin-top: 20upx;" v-for="(img,index) in avatar" :key="index">
				<image :src="img" mode="" style="width: 150upx;height: 150upx;" @click.stop.prevent="toggleMask1('show', index)"></image>
			</view>
			<view style="display: inline-block;width: 150upx;height: 150upx;border-radius: 10upx;border: 2upx solid #ccc;margin-left: 20upx;overflow: hidden;margin-top: 20upx;text-align: center;font-size: 55upx;line-height: 145upx;" @click.stop.prevent="clk(img_index)">
				+
			</view>
		</view> -->
		
		
		<!-- 头部轮播 -->
		<!-- @click="chooseImage" -->
		<swiper indicator-dots="true" circular="true" autoplay="true" :current="swiperCurrentIndex" interval="5000" duration="500" style="height: 1000upx;" v-if="avatar.length >0" @change="chg_swiper" >
			<swiper-item v-for="(img,index) in avatar" :key="index">
				<image :src="img" style="width: 100%;display: inline-block;vertical-align: middle;" mode="widthFix" @click.stop.prevent="toggleMask1('show', index)"/>
			</swiper-item>
		</swiper>
		
		<!-- <view @click="chooseImage" style="width: 750upx; height: 450upx;text-align: center;" v-if="avatar.length ==0" >
			<image style="width: 200upx;height: 200upx;margin-top: 130upx;" src="../../../../static/xiangji.png" mode=""></image>
			<text style="color:#ccc;display: block;">点击添加封面</text>
		</view> -->
		
		<view style="background-color: #fff;position: relative;">
			<view style="width: 110upx;height: 110upx;text-align: center;position: absolute;top: 45upx;right: 80upx;z-index: 9;">
				<image style="width: 110upx;height: 110upx;" src="../../../../static/xiangji.png" mode="" @click.stop.prevent="clk(img_index)"></image>
			</view>
			<input type="text" v-model="title" placeholder="填写标题会有更多赞哦~" placeholder-style="font-size: 28upx;" style="border-bottom: 1upx solid #ccc;margin: 0upx 30upx;height: 100upx;line-height: 100upx;color: #888888;font-size: 32upx;" />
			<view style="margin: 0upx 30upx;min-height: 100upx;line-height: 60upx;border-bottom: 1upx solid #ccc;">
				<textarea maxlength="2050" style="min-height: 100upx;line-height: 60upx;width: 100%;margin-top: 20upx;" v-model="content" placeholder="添加正文" placeholder-style="line-height: 60upx;" />
			</view>
			<view style="border-bottom: 1upx solid #ccc;margin: 0upx 30upx;height: 100upx;line-height: 100upx;color: #888888;font-size: 32upx;" @click="to_goods">
				{{ '#' + goods_name + '#'}}
			</view>
			<view>
				<view style="margin: 0upx 30upx;border-bottom: 3upx solid #ccc;height: 100upx;line-height: 100upx;color: #888888;font-weight: 555;font-size: 32upx;" @click="to_Top">
					#{{ label_name}}#
				</view>
			</view>
		</view>
		
		<avatar @upload="doUpload" @avtinit="doBefore" quality="1" ref="avatar"></avatar>
		<button type="default" style="background-color: #000000;color: #fff;position: fixed;bottom: 60upx;width: 90%;margin: 0 5%;z-index: 20;" @click="submit" v-if="id">编辑提交</button>
		<button type="default" style="background-color: #000000;color: #fff;position: fixed;bottom: 60upx;width: 90%;margin: 0 5%;z-index: 20;" @click="submit" v-if="id == '' || id == undefined">发布</button>
		
		<view class="mask" :class="maskState1===0 ? 'none' : maskState1===1 ? 'show' : ''" @click="toggleMask1">
			<view class="mask-content">
				
				<view style="width: 90%;margin: 0 auto;height: 80upx;line-height: 80upx;background-color: #f3f3f3;border-radius: 16upx;text-align: center;margin-top: 110upx;color: #EC4E3F;font-size: 32upx;z-index: 999;" @click="del_img(index)">
					删除
				</view>
				<view style="width: 90%;margin: 0 auto;height: 80upx;line-height: 80upx;background-color: #f3f3f3;border-radius: 16upx;text-align: center;margin-top: 20upx;color: #1A79F3;font-size: 32upx;z-index: 999;">
					取消
				</view>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	import avatar from "@/components/yq-avatar/yq-avatar.vue";
	export default {
		data() {
			return {
				avatar:[],
				img_devide:'',
				urls: [''],
				img_index: 0, // 选中的第一张图片索引为 0
				swiperCurrentIndex: '', //当前转到的轮播图对象索引
				index: '', // 将要删除的商品 索引
				user_id:'',
				res:[],
				label_id:'',
				label_name:'参与话题',
				goods_id:'',
				goods_name:'选择商品',
				content:'',
				id:'', // 我的发布文章id
				title:'',
				maskState1: 0, //删除面板显示状态
				
			}
		},
		// watch :{
		// 	avatar(e,newValue,oldValue){
		// 		if(this.newValue !== oldValue){
		// 			this.avatar = newValue;
		// 		}
		// 	}
		// },
		components: {
			avatar
		},
		onLoad(e) {
			uni.getStorage({
				key: 'label_avatar',
				success: (res) => {
					this.avatar = res.data
				},
			});
			if (e.id) {
				this.id = e.id
				this.setAjax()
			}
			// 选中文章的标题
			if (e.label_id) {
				uni.setStorage({
					key: 'label_id_essay',
					data: e.label_id
				})
				uni.setStorage({
					key: 'label_name_essay',
					data: e.label_name
				})
				this.label_id = e.label_id
				this.label_name = e.label_name
			}
			if (e.goods_id) {
				uni.setStorage({
					key: 'goods_id_essay',
					data: e.goods_id
				})
				uni.setStorage({
					key: 'goods_name_essay',
					data: e.goods_name
				})
				this.goods_id = e.goods_id
				this.goods_name = e.goods_name
			}
			this.index = 0
			uni.getStorage({
				key: 'user_id',
				success: (res) => {
					this.user_id = res.data
				},
			});
			
			// 文章图片 内容 标题
			uni.getStorage({
				key: 'label_title',
				success: (res) => {
					this.title = res.data
				},
			});
			uni.getStorage({
				key: 'label_content',
				success: (res) => {
					this.content = res.data
				},
			});
			// uni.getStorage({
			// 	key: 'img_devide',
			// 	success: (res) => {
			// 		this.img_devide = res.data
			// 	},
			// });
			
			// 话题
			uni.getStorage({
				key: 'label_id_essay',
				success: (res) => {
					this.label_id = res.data
				},
			});
			uni.getStorage({
				key: 'label_name_essay',
				success: (res) => {
					this.label_name = res.data
				},
			});
			// 商品
			uni.getStorage({
				key: 'goods_id_essay',
				success: (res) => {
					this.goods_id = res.data
				},
			});
			uni.getStorage({
				key: 'goods_name_essay',
				success: (res) => {
					this.goods_name = res.data
				},
			});
		},
		methods: {
			chg_swiper(e) {
				this.swiperCurrentIndex = e.detail.current
				console.log(this.swiperCurrentIndex)
			},
			// 显示删除选择面板
			toggleMask1(type,index){
				if (index != undefined || index != '') {this.index = index}
				let timer = type === 'show' ? 10 : 300;
				let	state = type === 'show' ? 1 : 0;
				this.maskState1 = 2;
				setTimeout(()=>{
					this.maskState1 = state;
				}, timer)
				
			},
			del_img(index) {
				let arrayImg = this.avatar
				arrayImg.splice(this.index, 1); // 删除指定位置元素
				
				if (arrayImg.length == index) {
					// 判断用户删除的图片是不是图片数组内的最后一张，是则将swiper的current值为图片数组长度减一，可以保证显示上一张图片
					this.avatar = arrayImg,
					this.swiperCurrentIndex = this.avatar.length - 1
				} else {
					// 删除的图片不是图片数组内的最后一张，这样可以保证当前显示下一张图片
					console.error('删除的图片不是图片数组内的最后一张');
					this.avatar = arrayImg
				}
				uni.setStorage({
					key: 'label_avatar',
					data: this.avatar
				})
				// uni.showModal({
				//     title: '提示',
				//     content: '是否删除?',
				//     success: (res)=> {
				//         if (res.confirm) {
				// 						this.avatar.splice(index, 1); // 删除指定位置元素
				// 						uni.setStorage({
				// 							key: 'label_avatar',
				// 							data: this.avatar
				// 						})
				// 						return
				//         } else if (res.cancel) {
				// 						return
				//         }
				//     }
				// });
			},
			setAjax () {
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/LabelPaper/paperDetail',
					method: 'POST',
					data:{
						id: this.id,
						session_id: uni.getStorageSync("sessionid")
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: (res) => {
						if(res.data.code == 999){
							uni.navigateTo({
								url:'/pages/999/999'
							})
						};
						if(res.data.code == 998){
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}
						let res_ = res.data.data.list[0]
						// 存取要传给后台的字符串格式
						// 对页面重新渲染
						this.img_devide = ''
						for (let i = 0; i < res_.images.length; i++ ) {
							this.img_devide = this.img_devide + '#' + res_.images[i]
							res_.images[i] = 'https://cx.mingmeijt.com' + res_.images[i]
						}
						this.avatar = res_.images
						this.title = res_.title
						this.content = res_.content
						
						this.label_name = res_.label_name
						this.label_id = res_.label_id
						
						this.goods_name = res_.goodsInfo.goods_name
						this.goods_id = res_.goodsInfo.id
					}
				});
			},
			submit() {
				uni.showLoading({
					title: '上传中'
				})
				console.log(this.avatar)
				let img_devide = ''
				for(let i = 0; i < this.avatar.length; i++ ) {
					img_devide = img_devide +'#' + this.avatar[i].substring(24,this.avatar[i].indexOf('?'))
					
				}
				this.img_devide = img_devide
				// console.log(img_devide)
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/LabelPaper/addPaper',
					method: 'POST',
					data:{
						user_id: this.user_id,
						label_id: this.label_id,
						title: this.title,
						goods_id: this.goods_id,
						images: this.img_devide,
						content: this.content,
						session_id: uni.getStorageSync("sessionid")
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: (res) => {
						if(res.data.code == 999){
							uni.navigateTo({
								url:'/pages/999/999'
							})
						};
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						setTimeout(() => {
							uni.hideLoading()
							if (res.data.code == 200) {
								uni.reLaunch({
									url: '../../../../pages/user/user'
								})
							}
						}, 1000);
					}
				});
			},
			to_Top: function(){
				uni.setStorage({
					key: 'label_title',
					data: this.title
				})
				uni.setStorage({
					key: 'label_content',
					data: this.content
				})
				uni.setStorage({
					key: 'label_avatar',
					data: this.avatar
				})
				// uni.setStorage({
				// 	key: 'img_devide',
				// 	data: this.img_devide
				// })
				uni.navigateTo({
					url:'../Top/Top'
				})
			},
			to_goods: function(){
				var o = this
				uni.setStorage({
					key: 'label_title',
					data: this.title
				})
				uni.setStorage({
					key: 'label_content',
					data: this.content
				})
				uni.setStorage({
					key: 'label_avatar',
					data: this.avatar
				})
				// uni.setStorage({
				// 	key: 'img_devide',
				// 	data: this.img_devide
				// })
				uni.navigateTo({
					url:'../Top/goods'
				})
			},
			doBefore() {
				return
			},
			clk(index) {
				this.$refs.avatar.fChooseImg(index,{
					selWidth: '600upx', selHeight: '800upx', // 截屏区域大小
					expWidth: '1800upx', expHeight: '2400upx', // 修改上传后图片清晰度
					inner: index ? 'true' : 'false'
				});
			},
			doUpload(rsp) {
				var _this = this
				this.$set(this.urls, rsp.index, rsp.path)
				if (!this.avatar || _this.avatar.length == 0) { 
					this.avatar = []
					this.swiperCurrentIndex = this.avatar.length // 重置swiperCurrentIndex
				}
				let images = this.avatar
				// let img_devide =  ''
				let day2 = new Date().getTime();
				
				uni.uploadFile({
					url: 'https://cx.mingmeijt.com/Api/Upload/index',
					filePath: this.urls[this.img_index],
					name: 'file',
					formData: {
						'user': 'test',
						'session_id': uni.getStorageSync("sessionid")
					},
					success: (res) => {
						// img_devide = img_devide + '#' + JSON.parse(res.data).data
						// console.log(JSON.parse(res.data).data)
						// _this.img_devide = img_devide
						
						images.push('https://cx.mingmeijt.com' + JSON.parse(res.data).data + "?time=" + day2)
						_this.img_index++
					}
				});
				
				setTimeout(() => {
					_this.avatar = images
					console.log(_this.avatar)
				}, 1000);
			},
			
			chooseImage(){
				var _this = this
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						let file = res.tempFilePaths
						let images = []
						// let img = ''
						let img_devide =  ''
						for(var i = 0; i < res.tempFilePaths.length; i++) {
							uni.uploadFile({
								url: 'https://cx.mingmeijt.com/Api/Upload/index',
								filePath: file[i],
								name: 'file',
								formData: {
									'user': 'test',
									'session_id': uni.getStorageSync("sessionid")
								},
								success: (res) => {
									// img_devide = img_devide + '#' + JSON.parse(res.data).data
									
									images.push('https://cx.mingmeijt.com' + JSON.parse(res.data).data)
									// _this.img_devide = img_devide
								}
							});
						}
						_this.avatar = images
					}
				});
				
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}
	.myimg {
		width: 300upx;
		height: 400upx;
		border-radius: 0 !important;
	}
	.mask{
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0,0,0,0);
		z-index: 9995;
		transition: .3s;
		
		.mask-content{
			width: 100%;
			min-height: 30vh;
			max-height: 70vh;
			// background: #f3f3f3;
			transform: translateY(100%);
			transition: .3s;
			overflow-y:scroll;
		}
		&.none{
			display: none;
		}
		&.show{
			background: rgba(0,0,0,.4);
			
			.mask-content{
				transform: translateY(0);
			}
		}
	}
</style>
